<template>
  <div class="cartContainer">
    <div class="cartList">

      <div class="group orderType" v-for="cartItem in dataJson" :key="cartItem.shop_info_id" >
        <h3 class="mui-clearfix">
          <div class="btnWrap l">
            <input type="checkbox" class="checkBox all_select_btn allSelect">
          </div>
          <p class="l" style="font-size: 15px;line-height: 2;">{{cartItem.shop_name}}</p>
        </h3>
        <ul class="cartOrderListContainer">
          <swipeout v-for="cartGoodsItem in cartItem.goods_info" :key="cartGoodsItem.shop_goods_id">
            <swipeout-item @on-close="handleEvents('on-close')" @on-open="handleEvents('on-open')" transition-mode="follow">
              <div slot="right-menu">
                <!-- <swipeout-button @click.native="onButtonClick('fav')" type="primary">{{'Yes'}}</swipeout-button> -->
                <swipeout-button @click.native="onButtonClick('delete')" type="warn">{{'删除'}}</swipeout-button>
              </div>
              <div slot="content" class="demo-content vux-1px-t">
                <li class="mui-table-view-cell cartOrderList">
                  <a href="javascript:void(0);" class="mycollection-item">
                    <div class="btnWrap l">
                      <input type="checkbox" class="checkBox pt itemSelect">
                    </div>
                    <div class="goDetail">
                      <div class="imgWrap l">
                        <img :src="cartGoodsItem.pic | dealImg" alt="">
                      </div>
                      <div class="l info">
                        <div class="mui-clearfix top">
                          <div class="goodsName over2 l">{{cartGoodsItem.shop_name}}</div>
                        </div>
                        <div class="bot mui-clearfix">
                          <div class="l">
                            <p style="font-size: 12px; height:18px; color:#b7b1ae;" class="over">{{cartGoodsItem.platform_goods_spec_names | filterSize(cartGoodsItem.platform_goods_spec_value_names)}} </p>
                            <p class="money">
                              <span>¥ {{cartGoodsItem.sale_price}}</span>
                            </p>
                          </div>
                          <div class="mui-numbox addnumBox numOperation r ">
                            <button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button>
                              <input name="goods_cart_counts" disabled="disabled" value="1" class="mui-input-numbox" type="number">
                            <button class="mui-btn mui-btn-numbox-plus add" id="buyAddBtn" type="button">+</button>                     
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                </li>                
              </div>
            </swipeout-item>
          </swipeout>
        </ul>
      </div>

    </div>
    <div class="settlement clearfix">
      <div class="btnWrap l">
        <input type="checkbox" class="checkBox all_select">
      </div>
      <!-- <div class="label l">不同店铺的商品需要分别结算</div> -->
      <div class="l totalMoney" id="price">
        合计： ¥ <span>0.00</span>
      </div>
      <button class="r go_settlement">
        去结算(<span>0</span>)
      </button>
    </div>
  </div>

</template>
<script>
  import { GroupTitle, Swipeout, SwipeoutItem, SwipeoutButton, XButton } from 'vux';  
  import commonJson from '../../../static/js/common';

  export default {
    data() {
      return {
        domainImgName:commonJson.commonData().domainImgName,
        dataJson:''
      }
    },
    mounted() {
      var that = this;
      that.axios.get(commonJson.commonData().domainName + '/api/ v1/goods/lookShoppingCart2', {
          params: {
            'token': commonJson.commonData().token,
            'shop_info_id': '-2'
          }
        })
        .then(function (response) {
          console.log(response.data)
          if (response.data.code == 0) {
              that.dataJson = response.data.data;
          } else {

          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    methods: {
        onButtonClick (type) {
          alert('on button click ' + type)
        },
        handleEvents (type) {
          console.log('event: ', type)
        }
    },
    components: {
      GroupTitle,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
      XButton
    }
  };
</script>
<style scoped>
.cartList{
  padding-bottom: 50px;
}
.settlement {
    position: fixed;
    bottom: 51px;
    background-color: #fff;
    width: 100%;
}
.settlement .label {
    font-size: 12px;
    position: absolute;
    top: 5px;
    line-height: 12px;
    left: 5px;
}
.settlement .totalMoney {
    font: 14px/50px "microsoft yahei";
    color: #f05115;
}
/* .settlement .totalMoney {
    position: absolute;
    bottom: 6px;
    line-height: 12px;
    left: 5px;
} */
.settlement button {
    padding: 0 10px;
    background: #ff6600;
    font: 14px/50px "microsoft yahei";
    color: #fff;
    border: none;
}
.cartList .group ul li,.cartList .preSale ul li, #view #cart .content .cartList .normal ul li {
    width: 100%;
    padding: 0;
    border-bottom: solid 1px #e5e5e5;
}
.cartList .group ul li {
    border: none;
}
.cartList .mui-table-view-cell a {
    margin: 0;
    white-space: normal;
}
.cartList .group ul li .btnWrap, .cartList .preSale ul li .btnWrap, .cartList .normal ul li .btnWrap {
    width: 10%;
    text-align: center;
    padding-top: 20px;
}
.cartList .group h3 .btnWrap input, .cartList .group ul li .btnWrap input, .cartList .preSale ul li .btnWrap input, .cartList .normal ul li .btnWrap input {
    width: 20px;
    height: 20px;
    position: static;
}
.goDetail {
    overflow: hidden;
}
.cartList .group ul li .imgWrap,.cartList .preSale ul li .imgWrap, .cartList .normal ul li .imgWrap {
    width: 80px;
    height: 80px;
    margin-right: 10px;
}
.cartList .group ul li .imgWrap img, .cartList .preSale ul li .imgWrap img, .cartList .normal ul li .imgWrap img {
    width: 100%;
    height: 100%;
    display: block;
}
.cartList .group ul li .info, .cartList .preSale ul li .info, .cartList .normal ul li .info {
    height: 70px;
    width: calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
    width: -moz-calc(100% - 90px);
}
.cartList .group ul li .info .top .goodsName, .cartList .preSale ul li .info .top .goodsName, .cartList .normal ul li .info .top .goodsName {
    width: calc(100% - 41px);
    width: -webkit-calc(100% - 41px);
    width: -moz-calc(100% - 41px);
    font: 14px/18px "microsoft yahei";
    height: 36px;
    color: #000;
}
.cartList .group ul li .info .bot, .cartList .preSale ul li .info .bot, .cartList .normal ul li .info .bot {
    width: 97%;
    padding-right: 3%;
}
.cartList .group ul li .info .bot .l,.cartList .preSale ul li .info .bot .l, .cartList .normal ul li .info .bot .l {
    width: calc(100% - 120px);
    width: -webkit-calc(100% - 120px);
    width: -moz-calc(100% - 120px);
}
.cartList .group ul li .info .bot .l p {
    margin-bottom: 5px;
}
.cartList .group ul li .info .bot .l .money, .cartList .preSale ul li .info .bot .l .money, .cartList .normal ul li .info .bot .l .money {
    font: 14px/15px "microsoft yahei";
    color: #000;
}
.cartList .group ul li .info .bot .l p {
    margin-bottom: 5px;
}
.mui-numbox.addnumBox {
    height: 30px !important;
    padding: 0 40px;
    width: 120px;
}
.cartList .group ul li .info .bot .numOperation, .cartList .preSale ul li .info .bot .numOperation, .cartList .normal ul li .info .bot .numOperation {
    border: solid 1px #ddd;
    margin-top: 5px;
}
.cartList .group h3 .btnWrap, .cartList .preSale h3 .btnWrap, .cartList .normal h3 .btnWrap {
    width: 10%;
    text-align: center;
}
.demo-content{
  padding: 10px 0;
}
.cartList .group h3, .cartList .preSale h3, .cartList .normal h3 {
    width: 100%;
    padding: 10px 0;
    border-bottom: solid 1px #e5e5e5;
    margin: 0;
}
.settlement .btnWrap {
    width: 10%;
    text-align: center;
    padding-top: 6px;
}
.settlement .btnWrap input {
    width: 20px;
    height: 20px;
    background: #fff;
    outline: 0 !important;
    /* border: solid 1px #ccc; */
    border-radius: 50%;
    position: static;
}
</style>

